<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的购物车</title>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/login.css" />
    <link rel="stylesheet" href="./css/indextwo.css" />
    <link rel="stylesheet" href="./css/cart.css" />
  </head>
  <body>
    <div class="zhong">
      <div class="toop">
        <ul class="scc1">
          <li style="width: 150px"><a href="#">收藏波奇商城</a></li>
          <li><a href="#">城市</a></li>
        </ul>
        <ul class="scc2">
          <li>
            <a href="#">波奇首页</a>
            <div class="daf1"></div>
          </li>
          <li>
            <a href="#">关于波奇</a><span class="sp1">|</span>
            <div class="daf1"></div>
          </li>
          <li>
            <a href="#">手机版</a><span class="sp1">|</span>
            <div class="daf1"></div>
          </li>
          <li style="text-indent: 20px">
            <a href="zuche.html">注册</a><span class="sp1">|</span>
          </li>
          <li style="text-indent: 20px">
            <a href="login.html">登录</a><span class="sp1">|</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="box">
      <div class="box1">
        <a href="index.html"
          ><img src="../img/logo3.png" alt="log" class="im"
        /></a>
        <div class="ense">
          <ul>
            <li style="color: orangered">我的购物车</li>
            <li>核对订单信息</li>
            <li>订单提交成功</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 波奇购物车 -->
    <div class="dill">
      <h2 class="diss">
        波奇商城自营商品（江浙沪皖京津粤满59元即免运费）<a href="#"
          >继续购物&gt;&gt;</a
        >
      </h2>
      <div class="dill1">
        <ul>
          <li>
            <input
              type="checkbox"
              class="all-sel"
              onchange="allSelChange(this)"
            />全选
          </li>
          <li>图片</li>
          <li>商品</li>
          <li>价格</li>
          <li>数量</li>
          <li>操作</li>
        </ul>
      </div>
      <ul id="disll">
        <!-- <li>
            <h2></h2>
            <img src="" alt="">
            <p></p>
            <input type="number">
            <button>删除</button>
        </li> -->
      </ul>

      <div style="clear: both"></div>
      <div class="disill">
        <div class="jies">
          <p style="color: orangered">
            总价 ￥<span class="count-price" style="color: orangered">0</span>
          </p>
          <p>
            数量
            <span class="count">0</span>
          </p>
          <p><button>去结算</button></p>
        </div>
      </div>
    </div>
    <!-- 这里是底部 -->
    <div class="xss">
      <div class="xin">
        <div class="shou">
          <div class="chou1">
            <h2>新手上路</h2>
            <a href="#"><p>购物流程</p></a>
            <a href="#"><p>现金账户</p></a>
            <a href="#"><p>优惠券</p></a>
            <a href="#"><p>订单查询</p></a>
            <a href="#"><p>服务协议</p></a>
          </div>
          <div class="chou1">
            <h2>购买方式</h2>
            <a href="#"><p>余额支付</p></a>
            <a href="#"><p>网上支付</p></a>
            <a href="#"><p>银行汇款</p></a>
            <a href="#"><p>货到付款</p></a>
          </div>
          <div class="chou1">
            <h2>配送方式</h2>
            <a href="#"><p>配送方式</p></a>
            <a href="#"><p>收费标准</p></a>
            <a href="#"><p>配送时间</p></a>
          </div>
          <div class="chou1">
            <h2>售后服务</h2>
            <a href="#"><p>如何退换货</p></a>
            <a href="#"><p>如何退款</p></a>
            <a href="#"><p>退换货流程</p></a>
            <a href="#"><p>客服电话</p></a>
          </div>
          <div class="chou5">
            <h2>常见问题</h2>
            <a href="#"><p>注册登录</p></a>
            <a href="#"><p>波奇豆</p></a>
            <a href="#"><p>热点问题</p></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 这里是底部 -->
    <div class="dib">
      <div class="dibu" style="clear: both">
        <ul>
          <li><a href="#">关于波奇</a><span>|</span></li>
          <li><a href="#">投资者关系</a><span>|</span></li>
          <li><a href="#">诚聘英才</a><span>|</span></li>
          <li><a href="#">联系我们</a><span>|</span></li>
          <li><a href="#">网站地图</a><span>|</span></li>
          <li><a href="#">意见反馈</a><span>|</span></li>
          <li><a href="#">帮助中心</a><span>|</span></li>
          <li style="width: 170px">客服热线：400-820-6098</li>
        </ul>
        <ul>
          <li><a href="#">沪公网安备 31011502004955号</a><span>|</span></li>
          <li><a href="#">沪ICP备13034501号-2</a><span>|</span></li>
          <li style="width: 160px">增值电信业务经营许可证：</li>
          <li style="width: 130px"><a href="#"> 沪B2-20140120</a></li>
        </ul>
        <p>
          Copyright © 2007- 2021 Boqii.com All Rights Reserved
          光橙（上海）信息科技有限公司 版权所有
        </p>
        <ul>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
          <a href="#"><li></li></a>
        </ul>
        <p>
          违法和不良信息举报电话：<a href="#">021-68826169</a
          >&nbsp;|&nbsp;举报邮箱：<a href="#">zhengls@boqii.com</a>
        </p>
        <p>如网民接到962110电话，请立即接听</p>
      </div>
    </div>

    <script>
      loadCartList();
      // 加载购物车列表
      async function loadCartList() {
        let cartListAPI = "http://jx.xuzhixiang.top/ap/api/cart-list.php";
        let id = localStorage.getItem("id");
        let res = await axios.get(cartListAPI, { params: { id: id } });
        console.log(res.data);
        let cartArr = res.data.data;
        // 根据服务返回的购物车数组-生成 页面结构
        let resArr = cartArr.map(
          (v) => `
          <li>
                      <input class='single-select' type="checkbox" onchange="singleSelect(${v.pid},this)">
                      <img src="${v.pimg}" alt="" />
                      <h2>${v.pname}</h2>
                      <p class="price" style="color:red">${v.pprice}</p>
                      <input class="pnum" min='1' onchange="numChange(${v.pid},this)" type="number" name="" id="" value="${v.pnum}" />
                      <button onclick="delCart(${v.pid},this)">删除</button>
                  </li>`
        );
        console.log(resArr);

        let ul = document.querySelector("#disll");
        ul.innerHTML = resArr.join("");
      }
      //删除功能
      async function delCart(pid, btn) {
        console.log(pid);
        let uid = localStorage.getItem("id");
        let delCartAPI = "http://jx.xuzhixiang.top/ap/api/cart-delete.php";
        let res = await axios.get(delCartAPI, {
          params: {
            uid: uid,
            pid,
          },
        });
        console.log(res.data);
        //重新加载购物车列表 或者 删除dom元素
        loadCartList();
        console.log(this); //window
        // btn.parentNode.remove();
      }
      function test(btn, evt) {
        console.log(btn);
        console.log(evt);
      }
      //数量改变事件
      async function numChange(pid, ipt) {
        console.log(ipt.value, pid);

        let updataCartNumAPI =
          "http://jx.xuzhixiang.top/ap/api/cart-update-num.php";
        let pnum = ipt.value;
        console.log(localStorage.getItem);
        let uid = localStorage.getItem("id");
        let params = { pnum, pid, uid };
        console.log(params);
        let res = await axios.get(updataCartNumAPI, { params });
        console.log(res.data);
      }
      // 单选事件
      function singleSelect(pid, ipt) {
        console.log(ipt.checked);
        // 找到所有单选框
        calCountPrice();

        let singleSelectArr = document.querySelectorAll(".single-select");
        //判断 singleSelectArr 是否所有的单选按钮都为true
        // 如果都是true,让 全选 变成true,反之 全选变成false
        //singleSelectArr--伪数数组,并不能使用 数组的方法
        let arr = [...singleSelectArr];
        let isAllChecked = arr.every(function (v) {
          return v.checked === true;
        });
        console.log(isAllChecked);
        document.querySelector(".all-sel").checked = isAllChecked;
      }
      // 全选按钮事件
      function allSelChange(ipt) {
        console.log(ipt.checked);
        //让单选的状态 跟 全选一致
        let singleSelectArr = document.querySelectorAll(".single-select");
        singleSelectArr.forEach((v) => (v.checked = ipt.checked));
        calCountPrice();
      }

      function calCountPrice() {
        let singleSelectArr = document.querySelectorAll(".single-select");
        console.log(singleSelectArr);
        let count = 0;
        let countPrice = 0;
        singleSelectArr.forEach((ipt) => {
          if (ipt.checked == true) {
            console.log(ipt);
            //找到选中元素的 父元素,根据父元素 再找子元素
            let currentLi = ipt.parentNode;
            let price = currentLi.querySelector(".price").innerHTML;
            let pnum = currentLi.querySelector(".pnum").value;
            let currentCount = price * pnum;
            console.log(currentCount);
            count = count + Number(pnum);
            countPrice += currentCount;
          }
        });
        console.log(count, countPrice);
        document.querySelector(".count").innerHTML = count;
        document.querySelector(".count-price").innerHTML = countPrice;
      }
    </script>
  </body>
</html>
